<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { getSceenQuery, getSceenAreaInfo } from './SearchLayerApi.js'
import SvgLocation from '@/assets/svg/location.svg'


const props = defineProps({
  menuActive: String,
//   activePark: String,
})

const isShowSearch = computed(() => {
    return [
        'houseDisplay', 'houseRent', 'marketExchange',
        'houseSecurity', 'houseSafety',
        'townshipConstruction', 'cityUpdate'
    ].includes(props.menuActive)
})

const showContent = ref(false)
const activeIndex = ref(0)
const districtOptions = ref([])
const isLoading = ref(false)
const form = ref({
    parkId: '', // 城区ID
    name: '', // 小区名称
    address: '', // 城区坐落
})
const tableData = ref([])
const reqData = () => {
    if (isLoading.value) return
    isLoading.value = true
    getSceenQuery(form.value).then(res => {
        tableData.value = res.data?.list ?? []
    }).finally(() => {
        isLoading.value = false
    })
}

const handleSearch = () => {
    activeIndex.value = 1
    reqData()
}

const showLayerContent = () => {
    showContent.value = true
    activeIndex.value = 0
}
 
onMounted(() =>{
    getSceenAreaInfo().then(res => {
        districtOptions.value = res.data
    })
})

</script>

<template>
    <div class="search-layer" v-show="isShowSearch">
        <div class="icon" @click="showLayerContent">
            <el-button :icon="Search"></el-button>
        </div>
        <div class="search-layer-content" v-if="showContent">
            <div class="tabs">
                <div class="tab-item" :class="{ on: activeIndex == 0 }" @click="activeIndex = 0">查询设置</div>
                <div class="tab-item" :class="{ on: activeIndex == 1 }" @click="activeIndex = 1">查询结果</div>
            </div>
            <div class="tabs-content">
                <div class="tab-content form" v-show="activeIndex == 0">
                    <div class="search-form">
                        <div class="form-item">
                            <label class="title">所属区域：</label>
                            <el-select v-model="form.projectCity" placeholder="请选择" clearble style="width: 200px;">
                                <el-option
                                    v-for="item in districtOptions"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="form-item">
                            <label class="title">小区名称</label>
                            <el-input v-model="form.name" placeholder="请输入" style="width: 200px;height: 32px;" clearable></el-input>
                        </div>
                        <div class="form-item">
                            <label class="title">坐落</label>
                            <el-input v-model="form.address" placeholder="请输入" style="width: 200px;height: 32px;" clearable></el-input>
                        </div>
                        <div class="form-item">
                            <label class="title"></label>
                            <div class="btn-submit" @click="handleSearch">搜索</div>
                        </div>
                    </div>
                </div>
                <div class="tab-content result" v-show="activeIndex == 1">
                    <el-scrollbar :style="{ height: 500 + 'px'}">
                        <div class="list-wrap" ref="listWrap">
                            <div class="list-item" v-for="(item, index) in tableData" :key="index">
                                <div class="name">
                                    <img :src="SvgLocation" alt="">
                                    {{ item.name }}
                                </div>
                                <div class="address">
                                    <!-- <span>{{ item.region }}</span> -->
                                    <span>{{ item.address }}</span>
                                </div>
                            </div>
                            <div class="no-data" v-if="!tableData.length && !isLoading">暂无数据</div>
                            <div class="no-data loading" v-if="isLoading">加载中...</div>
                            <div class="no-data no-more" v-if="noMore && tableData.length && !isLoading">没有更多</div>
                        </div>
                    </el-scrollbar>
                </div>
            </div>

            <div class="btn-close" @click="showContent = false">✖</div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.search-layer {
    position: absolute;
    top: 102px;
    right: -56px;

    .icon {
        :deep(.el-button) {
          color: white;
          background: #04AAF9;
          border-color: #04AAF9;
        }
    }

    .search-layer-content {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0;
        // right: -360px;
        left: 0;
        width: 354px;
        height: 560px;
        // border: 1px solid;
        // border-image: linear-gradient(0deg, #1663c9, #36a8ff) 10 10;
        // background: linear-gradient(0deg, #0b2032 0%, #1b61bb 100%);
        background: #07254E;
        box-shadow: 0 0 3px 3px #055C7C inset;
        padding: 0 5px;
        color: #fff;
        border-radius: 5px;
        .btn-close {
            position: absolute;
            top: 0;
            right: 5px;
            padding: 10px;
            cursor: pointer;
        }

        .tabs {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            line-height: 40px;
            margin-bottom: 6px;
            border-bottom: 1px solid #1E385E;

            .tab-item {
                position: relative;
                width: 6em;
                text-align: center;
                cursor: pointer;
            }
            .tab-item.on {
                color: #FFFFA3;
            }
            .tab-item.on::after {
                content: '';
                display: block;
                position: absolute;
                left: 40%;
                bottom: -2px;
                width: 30%;
                height: 2px;
                background: #FFFFA3;

            }
        }
        .tabs-content {
            flex: 1;
            padding-left: 15px;
            .search-form {
                :deep(.el-input) {
                    --el-input-text-color: #eee;
                    --el-input-bg-color: #055991;
                    --el-input-border-color: #055991;
                }
                :deep(.el-select__placeholder) {
                    color: #eee;
                }
                :deep(.el-select  .el-select__wrapper) {
                    border: 1px solid #055991; /* 设置边框颜色 */
                    background-color: #055991 !important; /* 设置背景色 */
                    // color: #fff !important; /* 设置字体颜色 */
                    box-shadow: 0 0 0 1px #055991 inset;
                }
                .form-item {
                    display: flex;
                    align-items: center;
                    margin-top: 10px;
                    margin-bottom: 20px;
                    color: #ACC9E3;
                    .title {
                        display: inline-block;
                        width: 5em;
                        flex-shrink: 0;
                    }
                }
                .btn-submit {
                    width: 80px;
                    height: 36px;
                    line-height: 36px;
                    text-align: center;
                    border-radius: 4px;
                    background-color: #055991;
                    color: #fff;
                    cursor: pointer;
                }
            }

            .list-wrap {
                .list-item {
                    padding: 6px 0;
                    line-height: 1.5;
                    color: #AFCCE5;
                    border-bottom: 1px solid #1E385E;
                    .address {
                        padding-left: 20px;
                    }
                }
            }

            .no-data {
                display: flex;
                width: 100%;
                text-align: center;
                line-height: 50px;
            }
        }
    }


}
</style>